<template>
    <div class="order_list" v-loading="loading">
        <div class="order_box" v-for="item in list" :key="item.id">
            <div class="order_box_tit">
                <div class="order_tit_left">
                    <p>下单时间：{{item.createTime}}</p>
                    <p>订单编号：{{item.id}}</p>
                </div>
                <div class="order_tit_right">
                    <p><i class="el-icon-time"></i>付款截止：59分58秒</p>
                </div>
            </div>
            <div class="order_box_com">
                <ul class="order_list">
                    <li class="order_list_item" v-for="arr in item.skus" :key="arr.id">
                        <router-link :to="'/home/Details?id='+arr.spuId" href="javascrip:;">
                            <img :src="arr.image" alt="" class="order_item_img" />
                        </router-link>
                        <div class="order_item_inter">
                            <p class="order_inter_name">{{arr.name}}</p>
                            <p class="order_inter_text">{{arr.attrsText}}</p>
                        </div>
                        <p class="order_item_price">￥{{arr.realPay}}</p>
                        <p class="order_item_num">x{{arr.quantity}}</p>
                    </li>
                </ul>
                <div class="order_state">
                    <p>{{orderStat[item.orderState-1]}}</p>
                </div>
                <div class="order_NumPrice">
                    <p class="order_num_price">￥{{item.payMoney}}</p>
                    <p class="order_num_freight">（含运费：￥{{item.postFee}}）</p>
                    <p class="order_num_text">{{item.payType==1?'在线支付':'货到付款'}}</p>
                </div>
                <div class="order_btn_box">
                    <el-button type="success">立即付款</el-button>
                    <el-button type="text">查看详情</el-button>
                    <el-button type="text">取消订单</el-button>
                </div>
            </div>
        </div>
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage1"
            :page-size="20" layout="prev, pager, next" :total="1000" class="page_box" prev-text="上一页" next-text="下一页">
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: "orderLi",
    props: {
        orderState: String
    },
    data() {
        return {
            list: [],
            loading: true,
            orderStat: ['待付款', '待发货', '待收货', '待评价', '已完成', '已取消'],
            currentPage1: 1,
            isArr: true
        }
    },
    watch: {
        "list": {
            immediate: true,//页面进来立刻同步监测
            handler() {
                if (this.list.length != 0) {
                    this.loading = false
                }
            }
        }
    },
    methods: {
        ajax(page = 1, orderState = 0) {
            this.$axios(`/member/order?page=${page}&pageSize=5&orderState=${orderState}`).then((res) => {
                this.list = res.data.result.items;
                console.log(this.list);
            });
        },
        handleCurrentChange(val) {
            this.ajax(val, this.orderState)
            this.loading = true
            // console.log(`当前页: ${val}`);
        }
    },
    mounted() {
        this.ajax(1, this.orderState)
    }
};
</script>
<style scoped lang="less">
.order_list {
    .order_box {
        border: 1px solid #f5f5f5;

        .order_box_tit {
            padding: 0 20px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f5f5f5;
            font-size: 14px;

            .order_tit_left {
                display: flex;

                p {
                    margin-right: 20px;
                }
            }

            .order_tit_right {
                i {
                    margin-right: 3px;
                }
            }
        }

        .order_box_com {
            display: flex;

            .order_list {
                border-right: 1px solid #f5f5f5;

                .order_list_item {
                    padding: 10px;
                    display: flex;
                    border-top: 1px solid #f5f5f5;

                    &>a {
                        width: 70px;
                        height: 70px;
                        border: 1px solid #f5f5f5;

                        .order_item_img {
                            width: 68px;
                            height: 68px;
                        }
                    }

                    .order_item_inter {
                        width: 220px;
                        text-align: left;
                        padding: 0 10px;
                        box-sizing: border-box;

                        .order_inter_name {
                            margin-bottom: 5px;
                            height: 38px;
                            line-height: 19px;
                            font-size: 14px;
                            word-break: break-all;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }

                        .order_inter_text {
                            color: #999;
                            font-size: 12px;
                            margin-bottom: 5px;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                        }
                    }

                    .order_item_price {
                        width: 100px;
                        text-align: center;
                        font-size: 14px;
                    }

                    .order_item_num {
                        width: 70px;
                        text-align: center;
                        font-size: 14px;
                    }
                }
            }

            .order_state {
                width: 120px;
                padding: 20px;
                box-sizing: border-box;
                text-align: center;
                font-size: 14px;
                border-right: solid 1px #f5f5f5;

                p {
                    padding-top: 10px;
                }
            }

            .order_NumPrice {
                width: 200px;
                box-sizing: border-box;
                padding: 20px;
                border-right: 1px solid #f5f5f5;

                .order_num_price {
                    color: #cf4444;
                }

                p {
                    text-align: center;
                    padding-top: 10px;
                    font-size: 14px;
                }
            }

            .order_btn_box {
                flex: 1;
                padding: 20px;
                display: flex;
                flex-direction: column;
            }
        }
    }
}
</style>
<style lang="less">
.order_list {
    .el-button--success {
        background: #27ba9b;
        width: 100px;
        height: 32px;
        font-size: 14px;
        padding: 0;
    }

    .el-button+.el-button,
    .el-checkbox.is-bordered+.el-checkbox.is-bordered {
        margin: 0;
    }

    .el-button--text {
        padding: 10px 0 0 0;
        width: 100px;
        color: #000;

        &:hover {
            color: #27ba9b;
        }
    }

    .page_box {
        padding: 30px;
        display: flex;
        justify-content: center;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #27ba9b
    }

    .el-pagination .btn-next,
    .el-pagination .btn-prev {
        background: none;
        font-size: 16px;
        border: solid 1px #f5f5f5;

        span {
            display: flex;
            padding: 10px;
            align-items: center;
        }
    }
}
</style>
